<template>
  <div class="side-panel" :class="{ collapsed: isPanelCollapsed }">
    <div class="panel-header">
      <h3 v-if="!isPanelCollapsed">摄像头列表</h3>
      <button class="collapse-btn" @click="$emit('togglePanel')">
        {{ isPanelCollapsed ? '→' : '←' }}
      </button>
    </div>
    
    <div v-if="!isPanelCollapsed" class="panel-content">
      <div class="camera-list">
        <div 
          v-for="camera in cameraList" 
          :key="camera.id"
          class="camera-item"
          @click="$emit('selectCamera', camera)"
          :class="{ active: selectedCamera && selectedCamera.id === camera.id }"
        >
          <div class="camera-info">
            <div class="camera-name">{{ camera.name }}</div>
            <div class="camera-status" :class="camera.status">
              <span class="status-dot"></span>
              {{ camera.status === 'online' ? '在线' : '离线' }}
            </div>
            <div class="camera-location">
              {{ camera.location || '未设置位置' }}
            </div>
          </div>
          <div class="camera-actions">
            <button class="locate-btn" @click.stop="$emit('flyToCamera', camera)">
              定位
            </button>
            <button 
              v-if="camera.status === 'online'" 
              class="play-btn" 
              @click.stop="$emit('openVideoPlayer', camera)"
            >
              播放
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 定义props
const props = defineProps({
  isPanelCollapsed: Boolean,
  cameraList: Array,
  selectedCamera: Object
})

// 定义事件
defineEmits(['togglePanel', 'selectCamera', 'flyToCamera', 'openVideoPlayer'])
</script>

<style lang="scss" scoped>
.side-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 280px;
  max-height: calc(100vh - 140px);
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1500;
  transition: all 0.3s ease;

  &.collapsed {
    width: 48px;
    
    .panel-content {
      display: none;
    }
  }

  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;

    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #1f2937;
    }

    .collapse-btn {
      background: none;
      border: none;
      font-size: 16px;
      cursor: pointer;
      padding: 4px;
      border-radius: 4px;
      
      &:hover {
        background: #f3f4f6;
      }
    }
  }

  .panel-content {
    padding: 0;
    max-height: 400px;
    overflow-y: auto;
  }
}

.camera-list {
  .camera-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background-color 0.2s;

    &:hover {
      background: #f9fafb;
    }

    &.active {
      background: rgba(64, 158, 255, 0.1);
      border: 1px solid rgba(64, 158, 255, 0.3);
    }

    .camera-info {
      flex: 1;

      .camera-name {
        font-size: 14px;
        font-weight: 500;
        color: #1f2937;
        margin-bottom: 4px;
      }

      .camera-status {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;

        .status-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
        }

        &.online {
          color: #10b981;
          .status-dot { background: #10b981; }
        }

        &.offline {
          color: #ef4444;
          .status-dot { background: #ef4444; }
        }
      }

      .camera-location {
        font-size: 11px;
        color: #999;
        margin-top: 2px;
      }
    }

    .camera-actions {
      display: flex;
      gap: 4px;
      opacity: 0;
      transition: opacity 0.2s;
    }

    &:hover .camera-actions {
      opacity: 1;
    }

    .play-btn {
      background: #67c23a;
      color: white;
      border: none;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      cursor: pointer;
      
      &:hover {
        background: #85ce61;
      }
    }

    .locate-btn {
      background: #409eff;
      color: white;
      border: none;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      cursor: pointer;
      
      &:hover {
        background: #66b1ff;
      }
    }
  }
}
</style>